<template>
  <div class="zs-table-page-container">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select filterable @change="brandChange" v-model="queryParams.brandId" class="zs-select-md zs-space-right-sm" placeholder="品牌"
          remote remote-show-suffix :remote-method="(name)=> name && getBrandDownList(name)">
          <el-option v-for="item in brandDownList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-select @change="projectChange" v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
          <el-option v-for="item in projectDownList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-select @change="queryList" v-model="queryParams.conshopcode" class="zs-select-md zs-space-right-sm" placeholder="商铺" clearable>
          <el-option v-for="item in bunkDownList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid" :class="{'zs-btn-square-solid-active': queryParams.yearStr}">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <el-select @change="queryList" v-model="queryParams.yearStr" class="zs-select-md zs-space-right-sm" placeholder="年份" clearable>
              <el-option v-for="item in curYears" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </template>
        </el-popover>
        <el-button @click="queryList" class="zs-btn-plain">查询</el-button>
      </span>
      <span>
        <el-button class="zs-btn-primary" @click="handleDownload">
          <el-icon class="el-icon--left">
            <Upload /> 
          </el-icon>导出
        </el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <hsPageTable :isHaveIndex="false" :isHavePage="false" :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns"
      :rowClassName="tableData.rowClass">
        <!-- <template #column>
          <el-table-column label="配置" width="180" align="center">
            <template #default="{ row }">
              <el-button class="zs-link" link size="small" @click="handleSee(row)">查看</el-button>
              <el-divider direction="vertical" />
            </template>
          </el-table-column>
        </template> -->
      </hsPageTable>
    </div>
  </div>
</template>

<script setup>
// import PageTable from "@/components/page-table.vue"
import { toThousands } from '@/utils/number-util'
import { downloadNewFile } from "@/utils/publicUtils"
import { brandAnalysisApi } from '@/api/SpecialReport/index'
import {reactive,ref} from "vue"
import { useRoute } from 'vue-router'
// import { useStore } from "vuex";
// let store = useStore();
let route = useRoute()

// 从蜂鸟地图直接跳转到这个页面时需要反显筛选项项目projectCode+商铺conshopcode
let { brandId, brandName, projectCode, conshopcode } = route.query

let curYears = ref([])
function getQueryYear() {
  let yearsArr = []
  let curYear = new Date().getFullYear()
  for(let i = curYear; i >= 2022; i--) {
    yearsArr.push({
      dictValue: i,
      dictLabel: i+'年',
    })
  }
  curYears.value = yearsArr.reverse()
}
getQueryYear()
// 查询条件
let queryParams = reactive({
  brandId,
  conshopcode,
  projectCode,
  yearStr:'',
})
// 表格数据
let tableData = reactive({
  loading:false,
  data:[],
  total: 0,
  cloumns:[
    {
      prop:'index', label:'序号',width:'80',type:'customMethods',methods:(a,empty,{$index})=>$index == 0 ? '' : $index
    },
    {prop:'monthStr',label:'日期',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'monthStr')
    },
    {prop:'projectName',label:'项目',align:'left', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'projectName')
    },
    {prop:'conshopcode',label:'商铺编号',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'conshopcode')
    },
    {prop:'useArea',label:'租赁面积',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'useArea')
    },
    {prop:'monthSales',label:'销售额',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'monthSales')
    },
    {prop:'avMonthSales',label:'月均销售',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'avMonthSales')
    },
    {prop:'monAvPlEff',label:'月均坪效',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'monAvPlEff')
    },
    {prop:'invrecamtl',label:'租费',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'invrecamtl')
    },
    {prop:'rentSaleR',label:'租售比',align:'right', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'rentSaleR')
    },
    {prop:'contractscode',label:'合同编号',align:'left', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'contractscode')
    },
    {prop:'constartdate',label:'合同开始',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'constartdate')
    },
    {prop:'conenddate',label:'合同结束',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'conenddate')
    },
    {prop:'contractsstatus',label:'合同状态',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'contractsstatus')
    },
    {prop:'jyMonthAmount',label:'营业天数',align:'center', type:'customMethods', 
      methods:(a,empty,{row,$index})=>rowMethods(row,$index,empty,'jyMonthAmount')
    },
  ],
  rowClass:({rowIndex})=>{
    if (rowIndex == 0) {
      return 'db-table-row-blue'
    }
  }
})

function rowMethods(row,index,empty,key) {
  if (row[key]) {
    if (['useArea','monthSales','avMonthSales','monAvPlEff','invrecamtl'].includes(key)) {
      return row[key] ? toThousands(Number(row[key]).toFixed(2)) : empty
    } else {
      return row[key] || empty
    }
  } else {
    if (index == 0) return ''
    return empty
  }
}

function queryList () {
  tableData.loading = true
  brandAnalysisApi.queryBrandAnalysisDetailListApi(queryParams).then(res=>{
    let resData = res.data
    if(resData.errorCode == 200){
      if (resData.data.data.length > 0) {
        let {totalMonthSales, totalAvMonthSales, totalMonAvPlEff, totalInvrecamtl, totalRentSaleR} = resData.data
        let sumObj = {
          projectName:'合计',
          monthSales: totalMonthSales,
          avMonthSales: totalAvMonthSales,
          monAvPlEff: totalMonAvPlEff,
          invrecamtl: totalInvrecamtl,
          rentSaleR: totalRentSaleR+'%'
        }
        resData.data.data.unshift(sumObj)
      }
      tableData.data = resData.data.data
    }
    tableData.loading = false
  })
}
queryList()


let brandDownList = ref([])
let projectDownList = ref([])
let bunkDownList = ref([])
function getBrandDownList(name){
  let curParams = name ? {name,typeCode:'pp'} : {typeCode:'pp',pageNo:1,pageSize:10}
  brandAnalysisApi.queryBrandDownListApi(curParams).then(res=>{
    let resData = res.data
    if(resData.errorCode == 200){
      brandDownList.value = resData.data
    }
  })
}
getBrandDownList(brandName)


function getQueryDownList(type){
  let params = {
    xm:{brandId:queryParams.brandId,typeCode:'xm'},
    sp:{brandId:queryParams.brandId,projectCode:queryParams.projectCode,typeCode:'sp'},
  }
  brandAnalysisApi.queryBrandDownListApi(params[type]).then(res=>{
    let resData = res.data
    if(resData.errorCode == 200){
      if (type == 'xm') projectDownList.value = resData.data;
      if (type == 'sp') bunkDownList.value = resData.data.map(el=>{return {id:el.id,name:el.name+'('+el.id+')'}});
    }
  })
}
getQueryDownList('xm')
getQueryDownList('sp')


function brandChange() {
  queryParams.projectCode = ''
  queryParams.conshopcode = ''
  getQueryDownList('xm')
  queryList()
}
function projectChange() {
  queryParams.conshopcode = ''
  getQueryDownList('sp')
  queryList()
}
// 从蜂鸟地图直接跳转到这个页面时需要反显筛选项项目+商铺
if(queryParams.conshopcode) {
  getQueryDownList('sp')
}

// 导出
function handleDownload () {
  brandAnalysisApi.exportBrandAnalysisDetailListApi(queryParams).then(res => {
      downloadNewFile(res.data, `品牌分析明细数据.xls`)
  })
}

</script>

<style lang="scss" scoped>
</style>
